<template>
  <div>
    <div class="hearder-search">
      <!--      搜索组件-->
      <!--        <SearchModle dataKey="bookIndex" @searchFn="searchFn"></SearchModle>-->
      <div class="search-list mb-10">
        <el-input v-model="searchForm.name" placeholder="书名" size="small" class="w-140 mr-10"></el-input>
        <el-input v-model="searchForm.code" placeholder="条形码" size="small" class="w-140 mr-10"></el-input>
        <el-input v-model="searchForm.editor" placeholder="作者" size="small" class="w-140 mr-10"></el-input>
        <el-cascader
          size="small"
          v-model="book_cat_id"
          :options="options"
          :props="{ expandTrigger: 'hover',value:'id', label: 'name'}"
          placeholder="类目"
          @change="handleChange"></el-cascader>
        <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i
          class="el-icon-search"></i>搜索
        </el-button>
        <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
      </div>
      <div class="mb-10 d-flex a-items">
        <el-button type="primary" plain @click.native="eidtBook()" size="small" class="mr-10">添加图书</el-button>
        <el-upload
          :action="$uploadImg"
          :on-success="handleSuccess"
          :on-progress="handleProgress"
          accept=".xls,.xlsx"
          :show-file-list="false"
          class="el-upload-body mr-10">
          <el-button type="primary" size="small" plain>导入图书</el-button>
        </el-upload>
        <downexcel type="allbook" :option="{
            book_cat_id: this.book_cat_id && this.book_cat_id.length?(this.book_cat_id.length==1?this.book_cat_id[0]:this.book_cat_id[1]):''
          }" :excelName="excelNameFn()"></downexcel>
        <el-button size="small" @click="showRanking(1)">书藉借阅排行榜</el-button>
        <el-button size="small" @click="showRanking(2)">人员借阅排行榜</el-button>
        <el-button size="small" @click="bookRepeatVisible =true">复本率</el-button>
        <span class="allbook">总 {{ code_number }} 本</span>
        <span class="allbook">总金额 {{ sum }} 元</span>
      </div>
    </div>
    <!--本体列表，数据 -->
    <el-table
      ref="multipleTable"
      :data="arryList"
      :stripe="tableStripe"
      :border="tableBorder"
      tooltip-effect="dark"
      header-cell-class-name="table-text-c"
      cell-class-name="table-text-c">
      <!--        <el-table-column-->
      <!--            align="center"-->
      <!--            prop="id"-->
      <!--            label="序号"-->
      <!--            width="80">-->
      <!--        </el-table-column>-->
      <el-table-column
        align="center"
        prop="name"
        label="图书名称">
      </el-table-column>
      <el-table-column
        align="center"
        prop="catname"
        label="图书类目">
      </el-table-column>
      <el-table-column
        align="center"
        prop="editor"
        label="作者"
        width="130">
      </el-table-column>
      <el-table-column
        align="center"
        prop="position"
        label="位置"
        width="100">
      </el-table-column>
      <el-table-column
        align="center"
        prop="num"
        label="库存"
        width="90">
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="380">
        <template slot-scope="scope">
          <!--// handleEdit-->
          <el-button size="small" @click="eidtBook(scope.row.id)">编辑</el-button>
          <el-button @click="gotolist(scope.$index)" size="small">多册详情
          </el-button>
          <el-button @click.native="addSeries(scope.$index)" size="small">添加同名图书
          </el-button>
          <el-button type="danger" size="small" @click="handleDetel(scope.$index, scope.row)" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        background
        :page-size="page.pagesize"
        :current-page="page.pageindex"
        layout="total, prev, pager, next"
        :total="page.total"
        @current-change="handleSizeChange"></el-pagination>
    </el-col>

    <div class="height40"></div>
    <ranking :visible.sync="rankingVisible" :rankingType="rankingType"></ranking>
    <codeList :visible.sync="codeListVisible" :codeBookDetail="codeBookDetail" @InitFn="InitFn"></codeList>
    <addCodeBook :visible.sync="addCodeVisible" :codeBookDetail="codeBookDetailInfo" @InitFn="InitFn"></addCodeBook>
    <addBook :visible.sync="addBookVisible" @InitFn="InitFn" :bookDetailId="bookDetailId"></addBook>
    <dupRate :visible.sync="bookRepeatVisible"></dupRate>
  </div>
</template>

<script>
import ranking from '@/components/dialog/ranking.vue'
import {pagination} from '@/utils/util.js'
import api from '@/utils/api.js'
import codeList from "./InsidePage/codeList";
import addCodeBook from "./InsidePage/addCodeBook";
import addBook from "./InsidePage/addBook";

export default {
  components: {
    addBook,
    ranking,
    codeList,
    addCodeBook
  },
  data() {
    return {
      codeListVisible: false, // 多册图书详情
      addCodeVisible: false, // 添加多册图书
      codeBookDetail: null, // 图书详情
      codeBookDetailInfo: null,// 图书详情
      addBookVisible: false, // 添加图书
      bookDetailId: 0, // 编辑图书id
      progressPercent: 0,
      rankingVisible: false, // 排行
      bookRepeatVisible: false,
      rankingType: 1,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      code_number: 0,
      sum: 0,
      // 搜索
      searchForm: {
        name: '',
        code: '',
        editor: '',
        book_cat_id: ''
      },
      book_cat_id: [],
      options: []
    }
  },
  created() {
    this.InitFn()
    this.getCate()
  },
  methods: {
    // 初始化
    InitFn() {
      this.searchForm.p = this.page.pageindex
      this.$fetch(this.api.book_index, this.searchForm).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
          this.code_number = response.code_number
          this.sum = response.sum
          console.log('接收到的数据信息', this.arryList, this.page.total)
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getCate() {
      this.$post('book_cat/index', {p: 1}).then((response) => {
        console.log(response)
        if (response.code === 0) {
          console.log('重置列表', this.$handleTree(response.list, 'id', 'tid'))
          this.options = this.$handleTree(response.list, 'id', 'tid')
        } else {
          console.log('请求失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 搜索组件
    searchFn(option) {
      console.log('book_cat_id:', this.book_cat_id)
      if (option === 'search') {
        if (this.book_cat_id && this.book_cat_id.length) {
          this.searchForm.book_cat_id = this.book_cat_id.length === 1 ? this.book_cat_id[0] : this.book_cat_id[1]
        }
      } else {
        this.searchForm = {
          name: '',
          code: '',
          editor: '',
          book_cat_id: ''
        }
        this.book_cat_id = []
      }
      this.page.pageindex = 1
      this.InitFn()
    },
    // 查看多册详情
    gotolist(index) {
      this.codeBookDetail = this.arryList[index]
      this.codeListVisible = true
      // this.$router.push('bookList?id=' + this.arryList[index].id)
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    showRanking(option) {
      this.rankingType = option
      this.rankingVisible = true
    },
    // 添加图书
    eidtBook(id) {
      this.bookDetailId = id || 0;
      this.addBookVisible = true; // 添加图书
      // let qurty = ''
      // if (type === 2) {
      //   qurty = this.arryList[index].id
      // }
      // this.$router.push('bookDetail?id=' + qurty)
    },
    addSeries(index) {
      this.codeBookDetailInfo = this.arryList[index]
      this.addCodeVisible = true
      // this.$router.push('addCodeBook?id=' + this.arryList[index].id)
    },
    handleDetel(index) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    handleProgress() {
      this.progressPercent = parseInt(event.percent)
    },
    handleSuccess(response) {
      this.materielImport(response.data.name)
    },
    // 导入物料
    async materielImport(path) {
      let data = await this.$post(api.book_import, {file: path})
      if (data.code === 0) {
        this.$message({
          type: 'success',
          message: '导入成功!'
        })
        this.InitFn()
      }
    },
    detelRespon(index) {
      this.$post(api.book_delete, {id: this.arryList[index].id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleChange(value) {
      console.log(value);
    },
    excelNameFn() {
      // options book_cat_id
      if (this.book_cat_id && this.book_cat_id.length) {
        let name_ = ''
        for (let item of this.options) {
          if (Number(this.book_cat_id[0]) === item.id) {
            if (this.book_cat_id[1]) {
              for (let children_ of item.children) {
                if (Number(this.book_cat_id[1]) === children_.id) {
                  name_ = children_.name
                }
              }
            } else {
              name_ = item.name
            }
          }
        }
        return name_
      } else {
        return ''
      }
    }
  },
  mounted() {
  }
}
</script>

